<template>
  <div>
    <ContainerTitle text="发布招聘需求列表" class="title"></ContainerTitle>
    <div class="titleDiv">
      <Buttons
        :buttons="sendBtn"
        @goRelease="
          $CheckRole('发布招聘', function () {
            $router.push({ path: 'companyRequirementEdit' });
          })
        "
      ></Buttons>
    </div>

    <div class="msgDiv">
      <el-table
        :data="requirements"
        style="width: 100%"
        :border="true"
        :header-cell-style="{ background: '#eef1f6', color: '#666666' }"
      >
        <el-table-column
          prop="name"
          label="标题"
          width="120"
          show-overflow-tooltip
          :resizable="false"
        >
        </el-table-column>
        <el-table-column
          prop="applyTime"
          label="发布时间"
          width="155"
          :resizable="false"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.applyTime || "-" }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="reason"
          label="申请期限"
          width="180"
          :resizable="false"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.beginDate + "至" + scope.row.endDate }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="post"
          label="招聘岗位"
          width="100"
          show-overflow-tooltip
          :resizable="false"
        >
        </el-table-column>
        <el-table-column
          prop="salaryName"
          label="岗位薪资"
          width="120"
          :resizable="false"
        >
        </el-table-column>
        <el-table-column
          prop="amount"
          label="招聘人数"
          width="78"
          :resizable="false"
        >
        </el-table-column>
        <el-table-column label="当前状态" width="80" :resizable="false">
          <template slot-scope="scope">
            <span :style="'color: ' + formantStatus(scope.row.status).color">{{
              formantStatus(scope.row.status).label
            }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          fixed="right"
          :resizable="false"
          min-width="145"
        >
          <template slot-scope="scope">
            <span
              class="rowBtn"
              @click="
                $router.push({
                  name: 'companyRecruitWorkerList',
                  query: { id: scope.row.id },
                })
              "
              >查看</span
            >
            <span
              class="rowBtn"
              @click="
                $router.push({
                  name: 'companyRequirementEdit',
                  query: { id: scope.row.id },
                })
              "
              >编辑</span
            >
            <span
              class="rowBtn"
              @click="deleteRequirement(scope.row)"
              v-if="scope.row.status == 1 || scope.row.status == 5"
              style="color: #d00000"
              >删除</span
            >
            <span
              class="rowBtn"
              @click="applyRequirement(scope.row)"
              v-if="scope.row.status == 1"
              >发布</span
            >
            <span
              class="rowBtn"
              @click="finishRequirement(scope.row)"
              v-if="scope.row.status == 2"
              >招满</span
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div id="pageDiv">
      <div id="policyPagination" v-if="total > 0">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          background
          :page-sizes="[10, 20, 30, 50]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
// import Tinymce from '@/components/tinymce'

import { getRequirements, applyRequirement, deleteRequirement, finishRequirement } from "@/common/api/company.js";

export default {
  name: "companyMyRecruit",
  // components: {Tinymce},
  data() {
    return {
      sendBtn:[{ text: "我要发布招聘", type: "success", size: "l", method: "goRelease" }],
      pageNum: 1,
      pageSize: 10,
      total: 0,
      crumbs: [
        {
          label: "企业空间",
          value: "company",
        },
        {
          label: " 人才服务",
          value: "help",
        },
        {
          label: "我的招聘",
          value: "companyMyRecruit",
          choose: true,
        },
      ],
      requirements: [],
      statusList: [
        {
          value: 1,
          label: "待发布",
          color: "#2c3e50",
        },
        {
          value: 2,
          label: "招聘中",
          color: "#10a217",
        },
        {
          value: 3,
          label: "已过期",
          color: "#2c3e50",
        },
        {
          value: 4,
          label: "已招满",
          color: "#10a217",
        },
        // {
        // 	value: 5, label: '未通过', color: '#d00000'
        // }
      ],
    };
  },
  methods: {
    /**
     * 改变页面大小事件
     */
    handleSizeChange: function (e) {
      let ns = this;
      ns.pageSize = e;
      ns.getRequirements();
    },
    /**
     * 换页事件
     */
    handleCurrentChange: function (e) {
      let ns = this;
      ns.pageNum = e;
      ns.getRequirements();
    },
    /**
     * 获取用工需求信息
     * @return {Promise<void>}
     */
    async getRequirements() {
      let ns = this;
      let data = {
        pageNum: ns.pageNum,
        pageSize: ns.pageSize,
      };
      let { code, msg, rows, total } = await getRequirements(data);
      ns.requirements = rows;
      ns.total = total;
    },
    /**
     * 申请用工需求
     */
    applyRequirement(requirement) {
      let ns = this;
      ns.$confirm("确认发布“" + requirement.name + "”？").then(async (_) => {
        let res = await applyRequirement({ id: requirement.id })
        if (res.code == 200) {
          ns.$message.success("发布成功");
          ns.getRequirements();
        } else {
          ns.$message.error(res.msg);
        }
      });
    },
    /**
     * 删除用工需求
     */
    deleteRequirement(requirement) {
      let ns = this;
      ns.$confirm("确认删除“" + requirement.name + "”？").then(async (_) => {
        let res = await deleteRequirement({ id: requirement.id })
        if (res.code == 200) {
          ns.$message.success("删除成功");
          ns.getRequirements();
        } else {
          ns.$message.error(res.msg);
        }
      });
    },
    /**
     * 已招用工需求
     */
    finishRequirement(requirement) {
      let ns = this;
      ns.$confirm("确认已招满“" + requirement.name + "”？").then(async (_) => {
        let res = await finishRequirement({ id: requirement.id })
        if (res.code == 200) {
          ns.$message.success("操作成功");
          ns.getRequirements();
        } else {
          ns.$message.error(res.msg);
        }
      });
    },
    /**
     * 格式化显示状态
     * @param status 要格式化的状态
     */
    formantStatus(status) {
      let ns = this;
      if (status == null || status == undefined) {
        return { label: "" };
      }
      for (let i = 0; i < ns.statusList.length; i++) {
        if (status == ns.statusList[i].value) {
          return ns.statusList[i];
        }
      }
      return { label: "" };
    },
  },
  mounted() {
    let ns = this;
    ns.getRequirements();
  },
  activated() {
    this.getRequirements();
  },
};
</script>

<style scoped>
.breadcrumb {
  width: 1000px;
  margin: 20px 0;
}

.roomDiv {
  display: flex;
  justify-content: center;
}

.roomDiv .leftDiv {
  width: 200px;
  text-align: left;
}

.roomDiv .rightDiv {
  width: 800px;
  margin-left: 30px;
}

.titleDiv {
  position: absolute;
  text-align: left;
  padding: 5px 0;
  font-size: 20px;
  font-weight: bold;
  color: #045db9;
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  right: 90px;
  top: 165px;
}

.titleDiv .sendBtn {
  font-weight: normal;
  color: #ffffff;
  background: #045db9;
  border-radius: 5px;
  font-size: 15px;
  display: flex;
  align-items: center;
  padding: 10px;
}

.titleDiv .sendBtn:hover {
  box-shadow: 0px 0px 5px #e1e1e1;
  cursor: pointer;
}

.msgDiv {
  margin: 40px 0;
}

::v-deep .el-table tbody tr:hover > td {
  background-color: #ffffff !important;
}

::v-deep .el-table td,
.el-table th.is-leaf,
.el-table--border,
.el-table--group {
  border-color: #eeeeee;
}

::v-deep .is-leaf {
  font-weight: normal;
}

::v-deep .el-table td,
.el-table th {
  padding: 10px 0;
}

.rowBtn {
  text-decoration: underline;
  color: #045db9;
  margin-right:5px
}

.rowBtn:hover {
  cursor: pointer;
}

#pageDiv {
  display: flex;
  justify-content: center;
}

#pageDiv #policyPagination {
  margin-bottom: 30px;
  width: 800px;
  text-align: right;
}

.layout {
  min-height: 100vh;
  position: relative;
  padding-bottom: 150px;
  box-sizing: border-box;
}

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
}
</style>
